<template>
	<view class="recorder">

		<view class="title">{{ currentDuration }}</view>
		<view class="buttons">
			<view class="button-item" v-if="videoUrl">
				<image src="/static/images/article/chonglu@3x.png" mode="" class="reset-button" @click="reset"></image>
				<text>重录</text>
			</view>
			<view class="button-item center-button">
				<image src="/static/images/article/bofang@3x.png" mode="" class="recorder-start" v-if="videoUrl"
					@click="confirm">
				</image>
				<image src="/static/images/article/kaishiluzhi@3x.png" mode="" class="recorder-start" v-else
					@click="onStart"></image>

				<text>{{ videoUrl ? "播放" : "开始录制" }}</text>
			</view>
			<view class="button-item" v-if="videoUrl">
				<image src="/static/images/article/wancheng@3x.png" mode="" class="reset-button" @click="confirm">
				</image>
				<text>完成录制</text>
			</view>
		</view>
	</view>
</template>

<script>
import { parseDuration } from "@/utils/common.js";
	export default {
		props: {
			videoUrl: {
				type: [String, null],
				default: "",
			},
			duration: {
				type: [String, Number],
				default: 0,
			},
		},
		data() {
			return {};
		},
		computed: {
			currentDuration() {
				return parseDuration(this.duration)
			}
		},
		methods: {
			// 完成事件
			confirm() {
				this.$emit("confirm");
			},
			onStart() {
				this.$emit("start");
			},
			// 重新录制
			reset() {
				this.$emit("reset");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.recorder {
		position: relative;

		background-color: #fff;
		font-size: 24rpx;
		width: 100%;

		.re-top {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			width: 100%;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.title {
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding: 20rpx 0 40rpx;
		}

		.buttons {
			display: flex;
			align-items: center;
			justify-content: center;

			.button-item {
				width: 138rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				color: #939999;
				margin: 0 40rpx;

				.reset-button {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 30rpx;
				}

				.recorder-start {
					width: 138rpx;
					height: 138rpx;
					margin-bottom: 30rpx;
				}
			}

			.center-button {
				font-weight: bold;
				color: #333333;
			}
		}

		.recorder-box {
			position: relative;

			.recorder-start {
				width: 138rpx;
				height: 138rpx;
			}
		}

		.now-date {
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}
	}
</style>